﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title> 简单 Ajax 例子 </title>

    <script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>



    <script type="text/javascript">


        $(document).ready(function () {


            // -------------------- 调用 “启用了 AJAX 的 WCF 服务” -------------------- 
            // 传递的数据格式为 Json.

            // 按钮1的 点击处理事件.
            $("#btnGetServerDate").click(function () {

                // 调用 ajax 
                $.ajax({
                    url: "/WcfTestService.svc/DoWork",
                    type: "get",
                    success: function (data) {
                        ShowAjaxResult(data.d);
                    },

                    error: function (msg) {
                        ShowAjaxResult(msg.responseText);
                    }
                })
            });


            // 按钮2的 点击处理事件.
            $("#btnGetServerDate2").click(function () {

                // 获取用户输入的参数.
                var vParam = $("#txtParam2").val();

                // 调用 ajax 
                $.ajax({
                    url: "/WcfTestService.svc/DoWork2",
                    type: "get",
                    data: "hello=" + vParam,
                    success: function (data) {
                        ShowAjaxResult(data.d);
                    },
                    error: function (msg) {
                        ShowAjaxResult(msg.responseText);
                    }
                })
            });



            // 按钮3的 点击处理事件.
            $("#btnGetServerDate3").click(function () {

                // 获取用户输入的参数.
                var vParamA = $("#txtParam3a").val();
                var vParamB = $("#txtParam3b").val();

                // 调用 ajax 
                $.ajax({
                    url: "/WcfTestService.svc/DoWork3",
                    type: "get",
                    data: "hello=" + vParamA + "&world=" + vParamB,
                    success: function (data) {
                        ShowAjaxResult(data.d);
                    },
                    error: function (msg) {
                        ShowAjaxResult(msg.responseText);
                    }
                })
            });




            // -------------------- 调用 “Web 服务” -------------------- 
            // 传递的数据格式为 XML

            // 按钮1的 点击处理事件.
            $("#btnGetServerDateXml").click(function () {

                // 调用 ajax 
                $.ajax({
                    url: "/TestWebService.asmx/DoWork",
                    type: "post",
                    data: "{}",
                    contentType: "application/xml;charset=utf-8",
                    dataType: "xml",
                    cache: false,
                    success: function (xml) {

                        var vResult = "";
                        $(xml).find("string").each(function (i) {
                            vResult = vResult + $(this).text();
                        });
                        $("#lblCallAjaxResult").html(vResult);

                    },

                    error: function (msg) {
                        ShowAjaxResult(msg.responseText);
                    }
                })
            });



            // 按钮2的 点击处理事件.
            $("#btnGetServerDate2Xml").click(function () {

                // 获取用户输入的参数.
                var vParam = $("#txtParam2X").val();

                // 调用 ajax 
                $.ajax({
                    url: "/TestWebService.asmx/DoWork2",
                    type: "post",
                    data: "hello=" + vParam,
                    // contentType: "application/xml;charset=utf-8",
                    dataType: "xml",
                    cache: false,
                    success: function (xml) {

                        var vResult = "";
                        $(xml).find("string").each(function (i) {
                            vResult = vResult + $(this).text();
                        });
                        $("#lblCallAjaxResult").html(vResult);

                    },
                    error: function (msg) {
                        ShowAjaxResult(msg.responseText);
                    }
                })
            });




            // 按钮3的 点击处理事件.
            $("#btnGetServerDate3Xml").click(function () {

                // 获取用户输入的参数.
                var vParamA = $("#txtParam3aX").val();
                var vParamB = $("#txtParam3bX").val();

                // 调用 ajax 
                $.ajax({
                    url: "/TestWebService.asmx/DoWork3",
                    type: "post",
                    data: "hello=" + vParamA + "&world=" + vParamB,
                    success: function (xml) {

                        var vResult = "";
                        $(xml).find("string").each(function (i) {
                            vResult = vResult + $(this).text();
                        });
                        $("#lblCallAjaxResult").html(vResult);

                    },
                    error: function (msg) {
                        ShowAjaxResult(msg.responseText);
                    }
                })
            });


        })



        // 显示  执行结果.
        function ShowAjaxResult(pResult) {
            $("#lblCallAjaxResult").html(pResult);
        }

    </script>

</head>


<body>

<h3>
简单调用，获取普通字符串类型的结果
</h3>



  <form id="form1" action="#">

 



 <h4> 使用 Json 传递数据. </h4>

     <table>
     

       <tr>

         <td>
           不传递任何参数的例子
         </td>

         <td>         
           <input id="btnGetServerDate" type="button" value="简单调用" title="显示服务器上的时间" />
         </td>
       
       </tr>


       <tr>
         <td>
            传递1个参数：
             <input id="txtParam2" type="text" value="12345" />
         </td>

         <td>

         <input id="btnGetServerDate2" type="button" value="简单调用2" title="显示服务器上的时间" />

         </td>
       
       </tr>




       <tr>

         <td>
         传递2个参数：

         <input id="txtParam3a" type="text" value="12345" />
         <input id="txtParam3b" type="text" value="67890" />

         </td>
       
         <td>

         <input id="btnGetServerDate3" type="button" value="简单调用3" title="显示服务器上的时间" />
     

         </td>
       </tr>

     
     </table>
         



<h4> 使用 XML 传递数据. </h4>


     <table>
     

       <tr>

         <td>
           不传递任何参数的例子
         </td>

         <td>         
           <input id="btnGetServerDateXml" type="button" value="简单调用" title="显示服务器上的时间" />
         </td>
       
       </tr>


       <tr>
         <td>
            传递1个参数：
             <input id="txtParam2X" type="text" value="12345 Xml" />
         </td>

         <td>

         <input id="btnGetServerDate2Xml" type="button" value="简单调用2" title="显示服务器上的时间" />

         </td>
       
       </tr>




       <tr>

         <td>
         传递2个参数：

         <input id="txtParam3aX" type="text" value="12345 Xml" />
         <input id="txtParam3bX" type="text" value="67890 Xml" />

         </td>
       
         <td>

         <input id="btnGetServerDate3Xml" type="button" value="简单调用3" title="显示服务器上的时间" />
     

         </td>
       </tr>

     
     </table>




<h3>
执行结果
</h3>

     <label id="lblCallAjaxResult"></label>

  </form>


</body>
</html>
